<!--  -->
<template>
  <label class="el-checkbox single" @click="getVal(label)">
    <span class="el-checkbox__input" :class="flag ? 'is-checked' : ''">
      <span class="el-checkbox__inner myclass"></span>
    </span>
    <span class="el-checkbox__label"><slot></slot></span>
  </label>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({ name: 'CheckBoxItem' })
export default class CheckBoxItem extends Vue {
  @Prop({ default: '' }) private label!: any
  // @Prop({ default: '' }) private flag!: any
  private flag = false
  private getVal (val) {
    (this.$parent as any).changes(val)
  }

  public flagChange (val) {
    this.flag = val
  }
}
</script>
<style lang='stylus' scoped>
.el-checkbox__inner.myclass
  border-radius 50%
</style>
